<template>
    <el-container>
        <vHeadSpace />
        <el-container>
            <vAsideSpace />
            <el-container>
                <el-main class="main">
                    <el-row :gutter="40">
                        <el-col :span="14">
                            <div class="filter-container" style="margin-left: 10px">
                                <label>查询知识:</label>
                                <el-input v-model="queryKey" clearable placeholder="请输入关键字" style="width: 200px;" class="filter-item" @clear="getKnowledge" />
                                <el-button type="primary" icon="el-icon-search" style="margin-left: 3px;margin-right: 5px;margin-top: 10px" @click="getKnowledge">搜索</el-button>
                                <!--<label>知识类型：</label>-->
                                <!--<el-cascader placeholder="请选择" style="position: absolute;margin-top: 10px;"-->
                                <!--        v-model="queryKnowledgeType"-->
                                <!--        :options="typeOptions"-->
                                <!--        :show-all-levels="false"-->
                                <!--        :props="{ expandTrigger: 'hover',-->
                                <!--                    checkStrictly: true,-->
                                <!--                     value: 'typeId',-->
                                <!--                     label: 'typeName'-->
                                <!--                     }"-->
                                <!--        @change="typeHandleChange">-->
                                <!--</el-cascader>-->
                                <!--<el-input v-model="queryKey" placeholder="请输入需要查询的知识" style="width: 200px;margin-left: 3px;margin-right: 5px;margin-top: 12px;" class="filter-item" />-->
                                <!--<label>知识类型：</label>-->
                                <!--<el-cascader placeholder="请选择" style="position: absolute;margin-top: 10px;"-->
                                <!--        v-model="queryKnowledgeType"-->
                                <!--        :options="typeOptions"-->
                                <!--        :show-all-levels="false"-->
                                <!--        :props="{ expandTrigger: 'hover',-->
                                <!--                    checkStrictly: true,-->
                                <!--                     value: 'typeId',-->
                                <!--                     label: 'typeName'-->
                                <!--                     }"-->
                                <!--        @change="typeHandleChange">-->
                                <!--</el-cascader>-->

                                <!--<el-select v-model="typeChoose"  placeholder="请选择" style="position: absolute;margin-top: 10px;">-->
                                <!--    <el-option label="软件" value="1"></el-option>-->
                                <!--    <el-option label="硬件" value="2"></el-option>-->
                                <!--    <el-option label="网络" value="3"></el-option>-->
                                <!--</el-select>-->
                            </div>
                        </el-col>
                        <el-col :span="10" style="float: right;margin-top: 10px;">
                            <el-button type="success" size="large" @click="addKnowledgeClick">知识录入</el-button>
                        </el-col>
                    </el-row>
                    <el-row align="center" style="margin-top: 10px">
                        <el-table v-loading="loading"  stripe width="130%" :data="knowledgeList" :row-style="{height:'25px'}"
                                  :cell-style="{padding:'0px'}" >
                            <el-table-column type="index" align="center" label="序号" width="50" fixed  :index="knowledgeIndexMethod"/>
                            <el-table-column prop="knowledgeName" label="知识名称" width="200" align="center" fixed />
                            <el-table-column prop="knowledgeType" label="类型" width="150" align="center" fixed >
                                <template slot-scope="scope">
                                    {{getKnowledgeType(scope.row.knowledgeType)}}
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="knowledgeLabel"
                                    label="关键字"
                                    align="center"
                                    width="100">
                            </el-table-column>
                            <el-table-column
                                    prop="problemName"
                                    label="解决问题"
                                    align="center"
                                    width="270"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="knowledgeRes"
                                    label="解决方案"
                                    width="200"
                                    align="center"
                                    show-overflow-tooltip>
                            </el-table-column>
                            <el-table-column
                                    prop="knowledgeAppraval"
                                    label="审批状态"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="approval_man"
                                    label="审批人"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="closureDir"
                                    label="附件"
                                    width="120"
                                    align="center">
                                <template slot-scope="scope">
                                    <el-button type="warning" icon="el-icon-share" size="mini" @click="checkClosure(scope.row)">查看附件</el-button>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="submit_user"
                                    label="提交者"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column
                                    prop="submit_time"
                                    label="提交时间"
                                    width="100"
                                    align="center">
                            </el-table-column>
                            <el-table-column label="操作" align="center" width="300">
                                <template slot-scope="scope">
                                    <el-button-group>
                                        <el-button  type="success" icon="el-icon-check" @click="approvalKnowledge(scope.row)" size="mini" v-if="scope.row.knowledgeAppraval === '待审批' ">审批</el-button>
                                        <el-button  type="success" icon="el-icon-check" @click="approvalKnowledge(scope.row)" size="mini" disabled v-if="scope.row.knowledgeAppraval === '审批通过'">审批</el-button>
                                        <el-button  type="success" icon="el-icon-check" @click="approvalKnowledge(scope.row)" size="mini" disabled v-if="scope.row.knowledgeAppraval === '拒绝'">审批</el-button>
                                        <el-button  type="primary" icon="el-icon-edit" @click="showUpdateDialogForm(scope.row)" size="mini">更新</el-button>
                                        <el-button  type="danger" icon="el-icon-delete" @click="deleteKnowledgeClick(scope.row)" size="mini">删除</el-button>
                                    </el-button-group>
                                </template>
                            </el-table-column>
                        </el-table>
                        <el-pagination
                                :current-page="currentPage"
                                :page-sizes="[5, 10, 20, 30]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="total"
                                @current-change="handleCurrentChange"
                                @size-change="handleSizeChange"
                                style="text-align: center"
                        />
                    </el-row>
                    <!-- 新增标签弹层 -->
                    <div class="add-form">
                        <el-dialog title="新增知识"  :visible.sync="addDialogFormVisible" v-if="addDialogFormVisible" width="1000px" :show-close="false">
                            <el-form :model="addFromData" :rules="rules" ref="addFromData" label-width="100px">

                                <el-row :gutter="4">
                                    <!--知识的标题-->
                                    <el-col :span="8">
                                        <el-form-item label="标题" prop="knowledgeName" >
                                            <el-input v-model="addFromData.knowledgeName" placeholder="知识的名称"/>
                                        </el-form-item>
                                    </el-col>
                                    <!--知识的标签-->
                                    <el-col :span="8">
                                        <el-form-item label="标签" prop="labelName">
                                            <el-input v-model="addFromData.labelName" placeholder="知识的标签"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="4">
                                    <!--知识的类型-->
                                    <el-col :span="8">
                                        <el-form-item label="知识类型" prop="type">
                                            <el-cascader
                                                    v-model="addFromData.type"
                                                    ref="typeRef"
                                                    :options="typeOptions"
                                                    :show-all-levels="false"
                                                    :props="{ expandTrigger: 'hover',
                                                 value: 'typeId',
                                                 label: 'typeName'
                                                 }"
                                                    @change="typeHandleChange">
                                            </el-cascader>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!--                            <el-row :gutter="4">-->
                                <!--                                &lt;!&ndash;关联告警名称&ndash;&gt;-->
                                <!--                                <el-col :span="8">-->
                                <!--                                    <el-form-item label="告警名称" prop="alertName">-->
                                <!--                                        <el-input v-model="formData.alertName"/>-->
                                <!--                                    </el-form-item>-->
                                <!--                                </el-col>-->
                                <!--                                <el-button @click="selectKey" type="small" >选择</el-button>-->
                                <!--                            </el-row>-->
                                <el-row :gutter="4">
                                    <!--关联的告警key-->
                                    <el-col :span="16">
                                        <el-form-item label="解决问题" prop="problemName">
                                            <el-input v-model="addFromData.problemName"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-button @click="selectKey" type="small" >选择</el-button>
                                </el-row>

                                <!--解决方案-->
                                <el-row>
                                    <el-col :span="20">
                                        <el-form-item label="解决方案" prop="description">
                                            <el-input v-model="addFromData.description" type="textarea" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!--附件的增加-->
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="上传附件">
                                            <!--:on-remove="handleRemove"
                                                    :on-preview="handlePreview"
                                                    :on-remove="handleRemove"-->
                                            <el-upload
                                                    class="upload-demo"
                                                    ref="upload"
                                                    :limit="3"
                                                    multiple
                                                    :action="uploadUrl"
                                                    :on-change="fileChange"
                                                    :on-remove="handleRemove"
                                                    :before-upload="beforeAvatarUpload"
                                                    :before-remove="beforeRemove"
                                                    :file-list="upload.fileList"
                                                    :auto-upload="false">
                                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="httpRequest">上传到服务器</el-button>-->
                                                <div slot="tip" class="el-upload__tip">文件大小不能超过2M</div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="addFormCancelClick()">取消</el-button>
                                <el-button type="primary" @click="submitForm('addFromData')" :disabled="isSearching">确定</el-button>
                            </div>
                        </el-dialog>
                    </div>
                    <!-- 修改设备弹窗 -->
                    <div class="modify-form">
                        <el-dialog title="更新知识"  :visible.sync="updateDialogFormVisible" v-if="updateDialogFormVisible" width="1000px" :show-close="false">
                            <el-form :model="updateFromData" :rules="rules" ref="updateFromData" label-width="100px">

                                <el-row :gutter="4">
                                    <!--知识的标题-->
                                    <el-col :span="8">
                                        <el-form-item label="标题" prop="knowledgeName" >
                                            <el-input v-model="updateFromData.knowledgeName" placeholder="知识的名称"/>
                                        </el-form-item>
                                    </el-col>
                                    <!--知识的标签-->
                                    <el-col :span="8">
                                        <el-form-item label="标签" prop="labelName">
                                            <el-input v-model="updateFromData.labelName" placeholder="知识的标签"/>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <el-row :gutter="4">
                                    <!--知识的类型-->
                                    <el-col :span="8">
                                        <el-form-item label="知识类型" prop="type">
                                            <el-cascader
                                                    v-model="updateFromData.type"
                                                    :options="typeOptions"
                                                    :show-all-levels="false"
                                                    :props="{ expandTrigger: 'hover',
                                                 value: 'typeId',
                                                 label: 'typeName'
                                                 }"
                                                    @change="typeHandleChange">
                                            </el-cascader>
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!--                            <el-row :gutter="4">-->
                                <!--                                &lt;!&ndash;关联告警名称&ndash;&gt;-->
                                <!--                                <el-col :span="8">-->
                                <!--                                    <el-form-item label="告警名称" prop="alertName">-->
                                <!--                                        <el-input v-model="formData.alertName"/>-->
                                <!--                                    </el-form-item>-->
                                <!--                                </el-col>-->
                                <!--                                <el-button @click="selectKey" type="small" >选择</el-button>-->
                                <!--                            </el-row>-->
                                <el-row :gutter="4">
                                    <!--关联的告警key-->
                                    <el-col :span="16">
                                        <el-form-item label="解决问题" prop="problemName">
                                            <el-input v-model="updateFromData.problemName"/>
                                        </el-form-item>
                                    </el-col>
                                    <el-button @click="selectKey" type="small" >选择</el-button>
                                </el-row>

                                <!--解决方案-->
                                <el-row>
                                    <el-col :span="24">
                                        <el-form-item label="解决方案" prop="description">
                                            <el-input v-model="updateFromData.description" type="textarea" />
                                        </el-form-item>
                                    </el-col>
                                </el-row>

                                <!--附件的修改-->
                                <el-row>
                                    <el-col :span="8">
                                        <el-form-item label="上传附件">
                                            <!--:on-remove="handleRemove"
                                                    :on-preview="handlePreview"
                                                    :on-remove="handleRemove"-->
                                            <el-upload
                                                    class="upload-demo"
                                                    ref="upload"
                                                    :limit="3"
                                                    multiple
                                                    :action="uploadUrl"
                                                    :on-change="fileChange"
                                                    :on-remove="handleRemove"
                                                    :before-upload="beforeAvatarUpload"
                                                    :before-remove="beforeRemove"
                                                    :file-list="upload.fileList"
                                                    :auto-upload="false">
                                                <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                                                <!--<el-button style="margin-left: 10px;" size="small" type="success" @click="httpRequest">上传到服务器</el-button>-->
                                                <div slot="tip" class="el-upload__tip">文件大小不能超过2M</div>
                                            </el-upload>
                                        </el-form-item>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <div slot="footer" class="dialog-footer">
                                <el-button @click="updateCancelClick">取消</el-button>
                                <el-button type="primary" @click="submitUpdateForm('updateFromData')" :disabled="isSearching">确定</el-button>
                            </div>
                        </el-dialog>

                    </div>
                    <!-- 列出key-description列表 -->
                    <div class="add-form">
                        <el-dialog title="可关联问题列表"  :visible.sync="alerKeyFormVisible">
                     <!--<span style="text-decoration: none;color: #00a4ff;">选择关联设备: &nbsp;-->
                     <!--    <template>-->
                     <!--      <el-select v-model="hostid" @change="handleSelectHost(hostid)" @visible-change="findAllHost"-->
                     <!--                 filterable>-->
                     <!--        <el-option-->
                     <!--                v-for="item in hostInfos"-->
                     <!--                :key="item.hostid"-->
                     <!--                :label="item.host"-->
                     <!--                :value="item.hostid">-->
                     <!--        </el-option>-->
                     <!--      </el-select>-->
                     <!--    </template>-->
                     <!-- </span>-->
                            <label>查询问题:</label>
                            <el-input v-model="queryProblemKey" clearable placeholder="请输入关键字" style="width: 200px;" class="filter-item"  />
                            <el-button type="primary" size="small" icon="el-icon-search" style="margin-left: 3px;margin-right: 5px;margin-top: 10px" @click="getProblemByKey">搜索</el-button>
                            <el-table
                                    :data="currentPageTriggers"
                                    width="100%"
                                    @row-click="handleSelectionChange">
                                <el-table-column
                                        prop="name"
                                        label="问题名称"
                                        width="250"
                                        align="center"
                                        show-overflow-tooltip>
                                </el-table-column>
                                <el-table-column
                                        prop="description"
                                        label="问题描述"
                                        width="450"
                                        align="center"
                                        show-overflow-tooltip>
                                </el-table-column>
                            </el-table>
                            <div style="margin-top: 30px;">
                                <el-pagination
                                        background
                                        layout="prev, pager, next"
                                        :total="keys_total"
                                        :page-size="keys_page_size"
                                        :current-page="keys_current_page"
                                        @current-change="keys_current_change">
                                </el-pagination>
                            </div>
                        </el-dialog>
                    </div>
                    <!--  附件列表  -->
                    <div class="closureList">
                        <el-dialog title="附件列表"  :visible.sync="closureDialogvisiable">&nbsp;
                            <!--@row-click="handleSelectionChange"-->
                            <el-table
                                    :data="closureList"
                                    width="100%"
                            >
                                <el-table-column type="index" align="center" label="序号" width="50" />
                                <!--<el-table-column-->
                                <!--        prop="id"-->
                                <!--        label="id"-->
                                <!--        width="150"-->
                                <!--        align="center">-->
                                <!--</el-table-column>-->
                                <el-table-column
                                        label="名称"
                                        width="200"
                                        align="center">
                                  <template slot-scope="{row}">
                                    {{row.file_dir.slice(row.file_dir.indexOf("_") + 1)}}
                                  </template>
                                </el-table-column>
                                <el-table-column
                                        prop="submit_user"
                                        label="提交者"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="submit_time"
                                        label="提交时间"
                                        width="150"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="下载"
                                        width="170"
                                        align="center">
                                    <template slot-scope="scope">
                                        <el-button  type="primary" icon="el-icon-edit" size="mini" @click="download(scope.row)">下载</el-button>
                                        <!--<a download="true" @click='download(scope.row)' style="cursor:pointer;"-->
                                        <!--&gt;<i  aria-hidden="true" style="color: #326EDC;">下载</i>-->
                                        <!--</a>-->
                                    </template>
                                </el-table-column>
                            </el-table>
                        </el-dialog>
                    </div>
                </el-main>
                <vFootSpace />
            </el-container>
        </el-container>
    </el-container>
</template>

<script>
    import axios from 'axios'

    export default {
        name: "KnowledgeBaseManagement",
        data() {
            return {
                // 查询问题关键字
                queryProblemKey: null,
                // 主页面的知识列表
                knowledgeList: [],
                // 所要查询的数据关键字
                queryKey: '',
                //所选择的类型
                typeChoose: '',
                // 主页分页参数
                currentPage: 1,
                pageSize: 10,
                total: 0,
                // 加载显示效果
                loading: false,
                //搜索
                isSearching: false,
                // 添加知识对话框的显示
                addDialogFormVisible: false,
                // 获取后台返回的知识数据
                formData: {},
                // 增加知识表单
                addFromData: {
                    knowledgeName: '',
                    labelName: '',
                    type: [],
                    alertKey: '',
                    problemName:'',
                    description: '',
                    approval: '',
                },
                // 更新知识数据
                updateFromData: {
                    id: '',
                    knowledgeName: '',
                    labelName: '',
                    type: [],
                    alertKey: '',
                    problemName:'',
                    description: '',
                    approval: '',
                    init_type:'',
                },
                // 更新知识的可见性
                updateDialogFormVisible: false,
                // 校验规则
                rules: {

                    knowledgeName: [{ required: true, message: '知识名称为必填项', trigger: 'blur' },
                        {pattern: /^[\u4e00-\u9fa5_a-zA-Z0-9]{1,30}$/,message: '不能输入空格和非法字符，长度限制30', trigger: 'blur'}
                    ],

                    labelName:[{ required: true, message: '标签名称为必填项', trigger: 'blur' }],

                    type: [{ required: true, message: '类型为必填项', trigger: 'blur' }],
                    // 此处键值变为可选项
                    // problemName:[{ required: true, message: '键值为必填项', trigger: 'blur' }],

                    description: [{min: 1, max: 1000,message: '字符过多，请上传附件！',trigger:'blur'}],
                },
                // 选择关联的key的对话框
                alerKeyFormVisible: false,
                //key创建表单
                tableData:[],
                //添加知识对话框选择的设备
                chooseHost:'',
                // 所有主机的列表和id
                hostInfos: {},
                // 增加知识对话框的hostid
                hostid:'',
                // 当前选中的设备
                host:'',
                // 获取指定设备的所有触发器
                triggerList:[],
                // 上传的附件
                fileList: [],
                // 上传文件的url
                uploadUrl: '/fileManager/uploadfile',
                // 附件储存位置
                fileUrl: '',
                // 临时储存的附件
                tempFiles: [],
                // 上传参数
                upload: {
                    // 是否禁用上传
                    isUploading: false,
                    // 设置上传的请求头部
                    // headers: {Authorization: "Bearer " + getToken()},
                    // 上传的地址
                    url: '/fileManager/uploadfile',
                    // 上传的文件列表
                    fileList: [],
                },
                // 附件列表可见性
                closureDialogvisiable: false,
                //附件列表
                closureList: [],
                // 知识分类
                typeOptions: [],
                // 知识分类query
                queryInfo: {
                    type: 3
                    // pagenum: 1,
                    // pagesize: 5
                },
                // 知识分类的value->label
                knowledgeTypeList: [],
                // 获取键值表达式的总数
                keys_total: 0,
                // 键值列表分页数据
                keys_current_page: 1,
                keys_page_size: 5,
                // 暂存的修改的附件列表
                tempFileList: [],
                // 知识查询的类型
                queryKnowledgeType: '',
                // 表格高度
                tableHeight: null,

            }
        },
        mounted(){
            // this.$nextTick(()=>{ this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 60; }
            this.findAllKnowledge()
            this.getAllKnowledgeType()
        },
        methods: {
            // 查询所有知识列表
            findAllKnowledge() {
                this.$axios({
                    method: "post",
                    url: "/konwledgeBase/getAllKonwledge.action",
                    params: {
                        currentPage: this.currentPage,
                        pageSize: this.pageSize
                    }
                }).then(res => {
                    this.knowledgeList = res.data.content.knowledgeList
                    this.total = res.data.content.totalNum
                    // console.log(this.knowledgeList);
                    // console.log('this.total',this.total);
                })
            },
            // 添加知识点击对话框
            addKnowledgeClick() {
                this.addDialogFormVisible = true
                this.addFromData.alertKey = ''
            },
            // 选择键值
            selectKey() {
                this.alerKeyFormVisible = true
                this.keys_current_page = 1
                axios.get('/trigger/getAllTrigger_new.action').then((res) => {
                    this.triggerList = res.data.content.problem_xml;
                    this.keys_total = this.triggerList.length;
                })
            },
            //重新显示选中的主机的触发器
            handleSelectHost(item) {
                for (let i = 0; i < this.hostInfos.length; i++) {
                    if (item === this.hostInfos[i].hostid) {
                        this.host = this.hostInfos[i].host;
                        break;
                    }
                }
                this.hostid = item
                this.chooseHost = false
                //查询所有触发器
                this.findAllTrigger()
            },
            //查询所有主机名和id
            findAllHost() {
                axios.post('/host/findAllHost.action').then((res) => {
                    this.hostInfos = res.data.content.hosts
                })
                this.chooseHost = true
            },
            //handle处理的是选中的触发器
            handleSelectionChange(val) {
                this.addFromData.alertKey = val.commonKey
                this.addFromData.problemName = val.name
                this.updateFromData.alertKey = val.commonKey
                this.updateFromData.problemName = val.name
                this.alerKeyFormVisible = false
            },
            //查询指定设备id的所有触发器
            findAllTrigger() {
                axios.post('/trigger/getAllTriggersByHostid_new.action?hostid=' + this.hostid).then((res) => {
                    this.triggerList = res.data.content.triggers
                    this.keys_total = res.data.content.total
                    this.keys_current_page = 1
                    // console.log('this.keys_total',this.keys_total)
                })
            },
            addFormCancelClick() {
                this.addDialogFormVisible = false
                this.isSearching = false
                this.restAddForm()
            },
            // 重置增添知识表单
            restAddForm() {
                // this.backgroundColor="#827e87"
                this.addFromData = {
                    knowledgeName: '',
                    labelName: '',
                    type: '',
                    alertKey: '',
                    description: ''
                }
                this.upload.fileList = []
            },
            // 更新表单取消按钮
            updateCancelClick() {
                this.updateDialogFormVisible = false
                this.isSearching = false
                this.resetUpdateForm()
            },
            // 重置更新表单
            resetUpdateForm() {
                this.updateFromData = {
                    knowledgeName: '',
                    labelName: '',
                    type: [],
                    alertKey: '',
                    description: '',
                    init_type: '',
                }
                this.upload.fileList = []
            },
            // 根据知识的id删除指定知识
            deleteKnowledgeClick(val) {
                this.$confirm('此操作将删除知识 ' + val.knowledgeName + ', 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    console.log(val);
                    axios.post('/konwledgeBase/deleteKonwledge.action', val).then((res) => {
                        if (res.data.status) { // 执行成功
                            // 弹出提示信息
                            this.$message({
                                message: '删除知识成功！',
                                type: 'success'
                            })
                            // 刷新页面
                            this.findAllKnowledge()
                        } else { // 执行失败
                            // 弹出提示
                            this.$message.error('删除知识失败！')
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                })
            },
            // 更新知识点击
            showUpdateDialogForm(val) {
                console.log(val)
                this.updateDialogFormVisible = true
                this.updateFromData.id = val.knowledgeID
                axios.post('/konwledgeBase/getKonwledgeById.action', val).then((res) => {
                    // console.log('res:'+res)
                    if (res.data.status) { // 执行成功
                        // 回显数据
                        this.updateFromData.knowledgeName = res.data.content.konwledgeAndClosure.knowledge.name_
                        this.updateFromData.problemName = res.data.content.konwledgeAndClosure.knowledge.problem
                        this.updateFromData.labelName = res.data.content.konwledgeAndClosure.knowledge.label
                        this.updateFromData.init_type = res.data.content.konwledgeAndClosure.knowledge.sim_type
                        // console.log("init_type"+this.updateFromData.init_type)
                        // 设置级联选择器绑定值
                        var tempArray = res.data.content.konwledgeAndClosure.knowledge.type_.split(',');
                        // 这里必须重新赋值为空数组，再赋值，否则v-model不能实现默认值回显
                        this.updateFromData.type = [];
                        tempArray.forEach(item => {
                            // item - 0是把数据类型转换为数字，以与cateList 数据类型一致，否则不能正确回显默认值
                            this.updateFromData.type.push(item - 0);
                        });
                        this.updateFromData.alertKey = res.data.content.konwledgeAndClosure.knowledge.key_
                        this.updateFromData.description = res.data.content.konwledgeAndClosure.knowledge.resolution
                        // console.log(res);
                        // 回显知识附件
                        this.tempFiles = res.data.content.konwledgeAndClosure.closure
                        for (let i = 0; i < this.tempFiles.length; i++) {
                            var tempFile = this.tempFiles[i].file_dir
                            var tempName = tempFile.substring(tempFile.lastIndexOf("_") + 1)
                            this.upload.fileList.push({"name": tempName,"id":this.tempFiles[i].file_id})
                            this.tempFileList.push({"name": tempName,"id":this.tempFiles[i].file_id})
                        }
                        // 弹出提示信息
                        this.$message({
                            message: '获取知识成功！',
                            type: 'success'
                        })
                    } else { // 执行失败
                        // 弹出提示
                        this.$message.error('获取知识失败！')
                    }
                })
            },
            // 移除附件
            handleRemove(file, fileList) {
                this.upload.fileList = fileList
            },
            // 文件预上传格式限制
            beforeAvatarUpload(file) {
                // const isJPG = file.type === 'image/jpeg'
                // const isPng = file.type === 'image/png'
                // const isLt2M = file.size / 1024 / 1024 < 2
                //
                // if (!isJPG && !isPng) {
                //     this.$message.error('上传图片只能是 JPG或png 格式!')
                // }
                // if (!isLt2M) {
                //     this.$message.error('上传图片大小不能超过 2MB!')
                // }
                // return (isJPG || isPng) && isLt2M
            },
            // 文件改变时
            fileChange(file, fileList) {
                this.upload.fileList = fileList
            },
            // 文件移除之前
            beforeRemove(file, fileList) {
                return this.$confirm(`确定移除 ${file.name}？`);
            },
            // 新增知识提交按钮
            submitForm(addFromData) {
                this.$refs[addFromData].validate(valid => {
                    if (valid) {
                        this.addFromData.approval = '待审批'
                        let formData = new FormData()
                        this.upload.fileList.forEach(file => {
                            formData.append('file', file.raw)
                        })
                        formData.append("submit_user",localStorage.getItem("username"))
                        formData.append("knowledgeName", this.addFromData.knowledgeName)
                        formData.append("labelName", this.addFromData.labelName)
                        formData.append("problemName", this.addFromData.problemName)
                        formData.append("type", this.addFromData.type)
                        formData.append("alertKey", this.addFromData.alertKey)
                        formData.append("description", this.addFromData.description)
                        formData.append("approval", this.addFromData.approval)
                        axios.post('/konwledgeBase/createKonwledge.action', formData).then((res) => {
                            if (res.data.status) { // 执行成功
                                // 关闭新增窗口
                                this.addDialogFormVisible = false
                                // 弹出提示信息
                                this.$message({
                                    message: '知识录入成功！',
                                    type: 'success'
                                })
                                this.findAllKnowledge()
                                this.restAddForm()
                            } else { // 执行失败
                                // 弹出提示
                                this.$message.error('知识录入失败！')
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            // 更新知识提交按钮
            submitUpdateForm(updateFromData){
                this.$refs[updateFromData].validate(valid => {
                    if (valid) {
                        let formData = new FormData()
                        this.upload.fileList.forEach(file => {
                            if (file.id != null){
                                formData.append("closureIds", file.id)
                            }else{
                                formData.append('file', file.raw)
                            }
                        })
                        formData.append("id", this.updateFromData.id)
                        formData.append("submit_user",sessionStorage.getItem("username"))
                        formData.append("knowledgeName", this.updateFromData.knowledgeName)
                        formData.append("labelName", this.updateFromData.labelName)
                        formData.append("problemName", this.updateFromData.problemName)
                        formData.append("type", this.updateFromData.type)
                        formData.append("alertKey", this.updateFromData.alertKey)
                        formData.append("description", this.updateFromData.description)
                        formData.append("approval", this.updateFromData.approval)
                        formData.append("init_type", this.updateFromData.init_type)
                        axios.post('/konwledgeBase/updateKonwledge.action', formData).then((res) => {
                            if (res.data.status) { // 执行成功
                                // 关闭新增窗口
                                this.addDialogFormVisible = false
                                // 弹出提示信息
                                this.$message({
                                    message: '知识修改成功！',
                                    type: 'success'
                                })
                                this.updateDialogFormVisible = false;
                                this.findAllKnowledge()
                                this.restAddForm()
                            } else { // 执行失败
                                // 弹出提示
                                this.$message.error('知识修改失败！')
                            }
                        })
                    }else {
                        return false;
                    }
                })
            },
            // 下载附件
            download(val) {
                console.log('val',val)
                this.$confirm('确认下载该附件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios({
                        method:'post',
                        url:'/fileManager/download2.action',
                        data:val,
                        // 二进制流文件，一定要设置成blob，默认是json
                        responseType: 'blob'
                    }).then((res)=> {
                        console.log(res)
                        let link = document.createElement("a");
                        link.style.display = "none";
                        link.href = window.URL.createObjectURL(new Blob([res.data]));
                        // link.setAttribute("download",row.zurl.substring(row.zurl.lastIndexOf("/")+1));//文件名
                        let name = val.file_dir.slice(val.file_dir.indexOf("_") + 1);
                        link.setAttribute("download",name);//文件名
                        document.body.appendChild(link);
                        link.click();
                        URL.revokeObjectURL(link.href);
                        document.body.removeChild(link);
                    })
                }).catch((error) => {
                    console.log(error)
                    this.$message({
                        type: 'info',
                        message: '已取消'
                    })
                })
            },
            // 查看附件
            checkClosure(val) {
                console.log(val)
                // if (val.closureDir != null) {
                //     this.closureList = []
                //     this.closureDialogvisiable = true
                //     var tempLen = val.closureDir.split(",").length
                //     for (let i = 0; i < tempLen; i++) {
                //         var closure_sub_user = val.closure_sub_user.split(",")[i]
                //         var closure_sub_time = val.closure_sub_time.split(",")[i]
                //         var tempDir = val.closureDir.split(",")[i]
                //         var obj = {
                //             dir: tempDir,
                //             name: tempDir.substring(tempDir.lastIndexOf("_")+1),
                //             id: val.closureID.split(",")[i],
                //             user:closure_sub_user,
                //             time:closure_sub_time
                //         }
                //         this.closureList.push(obj)
                //         // console.log(this.closureList);
                //     }
                // }else {
                //     this.$message.warning("当前知识无附件！")
                // }

                this.$axios({
                  url:"/konwledgeBase/get_closure_by_knowledgeId.action",
                  method: "POST",
                  data: {id: val.knowledgeID}
                }).then((res) => {
                  console.log(res)
                  if (!res.data.status) {
                    return this.$message.warning("当前知识无附件！")
                  }
                  this.closureDialogvisiable = true
                  this.closureList = res.data.content.result;
                })
            },
            // 获取分类列表
            getAllKnowledgeType(){
                axios.post('/konwledgeBase/get_all_type.action', {params: this.queryInfo}).then((res) => {
                    if (res.data.status) { // 执行成功
                        this.typeOptions = res.data.content.result
                        this.getTreeData(this.typeOptions)
                        console.log(this.typeOptions)
                        // console.log(this.knowledgeTypeList)
                    } else { // 执行失败
                        // 弹出提示
                        this.$message.error('获取知识类型失败！')
                    }
                })

            },
            // 知识类型的切换时的事件
            typeHandleChange(val) {
                console.log(val);
            },
            // 递归函数
            getTreeData(datas) {
                for(var i in datas){
                    var id = datas[i].typeId
                    var name = datas[i].typeName
                    this.knowledgeTypeList.push({id:id,name:name})
                    if(datas[i].children){
                        this.getTreeData(datas[i].children);
                    }
                }
            },
            //获取具体知识类型
            getKnowledgeType(typeStr) {
                var lastType = typeStr.substring(typeStr.lastIndexOf(',')+1)
                for (let i = 0; i < this.knowledgeTypeList.length; i++) {
                    if (this.knowledgeTypeList[i].id == lastType){
                        return this.knowledgeTypeList[i].name
                    }
                }
            },
            // 分页
            handleCurrentChange(currentPage){
                //换页
                // 设置最新的页码
                this.currentPage = currentPage
                this.findAllKnowledge()
            },
            //
            keys_current_change(currentPage){
                //换页
                // 设置最新的页码
                this.keys_current_page = currentPage
            },
            // 知识首页序号连续
            knowledgeIndexMethod(index) {
                return index + (this.currentPage-1) * this.pageSize + 1;
            },

            // 键值列表的序号连续
            keysIndexMethod(index) {
                return index + (this.currentPage-1) * this.pageSize + 1;
            },
            // 知识的审批
            approvalKnowledge(val){
                console.log(val)
                // this.$confirm('是否通过 ' + val.knowledgeName + ', 审核?', '提示', {
                //     confirmButtonText: '通过审批',
                //     cancelButtonText: '拒绝审批',
                //     type: 'warning'
                // }).then(() => {
                //     console.log(val);
                //     axios.post('/konwledgeBase/knowledgeApproval.action',{id:val.knowledgeID}).then(
                //         (res) =>{
                //             if (res.data.status){
                //                 this.findAllKnowledge()
                //                 return this.$message('知识审批成功！')
                //             }else{
                //                 return this.$message('知识审批失败！')
                //             }
                //         }
                //     ).catch((err) =>{
                //         return this.$message.error('知识审批失败！')
                //     })
                // }).catch(() => {
                //     this.$message({
                //         type: 'info',
                //         message: '已取消审核'
                //     })
                // })

                const h = this.$createElement;
                this.$msgbox({
                    title: '审批知识',
                    message: h('p', null, '此操作将通过知识" '+ val.knowledgeName +' "的审批'),
                    showCancelButton: true,
                    confirmButtonText: '通过',
                    cancelButtonText: '拒绝',
                    distinguishCancelAndClose: true,
                    center: true,
                    beforeClose: (action, instance, done) => {
                        if (action === 'confirm') {
                            let approval_man = sessionStorage.getItem("username");
                            instance.confirmButtonLoading = true;
                            instance.confirmButtonText = '执行中...';
                            axios.post('/konwledgeBase/knowledgeApproval.action',{id:val.knowledgeID,approval:1,approval_man:approval_man,knowledgeName:val.knowledgeName}).then(
                                (res) =>{
                                    console.log("知识名称"+val.knowledgeName)
                                    if (res.data.status){
                                        axios.post('/konwledgeBase/knowledgeApprovalSuccess.action',{id:val.knowledgeID,approval:1,approval_man:approval_man,knowledgeName:val.knowledgeName}).then(
                                            this.findAllKnowledge())
                                        return this.$message.success('知识" '+val.knowledgeName+' "审批通过!')
                                    }else{
                                        return this.$message.error('知识审批操作失败！')
                                    }
                                }
                            ).catch((err) =>{
                                return this.$message.error('知识审批操作失败！')
                            })
                            done();
                            instance.confirmButtonLoading = false;
                        } else if(action === 'cancel'){
                            instance.cancelButtonLoading = true;
                            instance.cancelButtonText = '执行中...';
                            let approval_man = sessionStorage.getItem("username");
                            axios.post('/konwledgeBase/knowledgeApproval.action',{id:val.knowledgeID,approval:-1,approval_man:approval_man,knowledgeName:val.knowledgeName}).then(
                                (res) =>{
                                    if (res.data.status){
                                        axios.post('/konwledgeBase/knowledgeApprovalFail.action',{id:val.knowledgeID,approval:1,approval_man:approval_man,knowledgeName:val.knowledgeName}).then(
                                            this.findAllKnowledge())
                                        return this.$message('知识" '+val.knowledgeName+' "审批已拒绝!')
                                    }else{
                                        return this.$message('知识审批操作失败！')
                                    }
                                }
                            ).catch((err) =>{
                                return this.$message.error('知识审批操作失败！')
                            })
                            done();
                            instance.cancelButtonLoading = false;
                        }else if(action === 'close') {
                            done();
                        }
                    }
                }).then(action => {
                    // this.$message({
                    //     type: 'info',
                    //     message: 'action: ' + action
                    // });
                });
            },
            getKnowledge(){
              axios.post('solrSearch/get_solr_result_by_nlr.action', {nlr:this.queryKey, pagenum: this.currentPage, pagesize:this.pageSize})
              .then((res) => {
                console.log(res)
                if (!res.data.status) return this.$message.error('获取知识失败');
                this.knowledgeList = res.data.content.resultData;
                this.total = res.data.content.total
              })
            },
            // 首页页面显示数量
            handleSizeChange(val){
                this.pageSize = val
                this.findAllKnowledge()
            },
            initTableHeight(){
                this.tableHeight = window.innerHeight - this.$refs.table.$el.offsetTop - 50;
                console.log(this.tableHeight)
            },
            // 更具关键字查询问题
            getProblemByKey(){
                this.$axios({
                    method: "post",
                    url: "/trigger/getAllTriggerByKey_new.action",
                    params: {
                        searchText: this.queryProblemKey
                    }
                }).then(res => {
                    this.keys_current_page = 1
                    this.triggerList = res.data.content.problem_xml;
                    this.keys_total = this.triggerList.length;
                })
            }
        },
        computed: {
            // 计算当页的触发器
            currentPageTriggers: function () {
                let start = (this.keys_current_page - 1) * this.keys_page_size
                let end = start + this.keys_page_size
                if (end >= this.triggerList.length)
                    end = this.triggerList.length
                //截取字符串
                return this.triggerList.slice(start, end);
            },
        }
    }
</script>

<style scoped>
    .el-form-item{
        margin-bottom: 20px;
    }
    .buttonText{
        color: #2ac06d;
        cursor:pointer;
    }
    .title {
        height: 56px;
        line-height: 56px;
        vertical-align: center;
    }
    .title p {
        float: left;
        font-size: 30px;
    }
    .mapToolBar {
        min-height: 36px;
        line-height: 36px;
    }
    .toolBlock {
        float: left;
        margin-right: 10px;
    }
    .mapCanvas {
        float: left;
        margin-top: 10px;
        background: white;
        width: 100%;
    }
    .footer {
        position: absolute;
        bottom: 30px;
        margin-bottom: 10px;
        /*margin-top: 20px;*/
        float: left
    }
    .mapCanvas-content {
        background-image: linear-gradient(90deg, rgba(50, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%), linear-gradient(360deg, rgba(50, 0, 0, 0.1) 2%, rgba(0, 0, 0, 0) 2%);
        background-size: 50px 50px;
        background-repeat: repeat;
        background-position: center center;
    }
    .zoomBtn {
        display: inline;
        padding: 4px 5px;
        text-align: center;
        border-radius: 2px;
        line-height: 36px;
        background: rgb(64, 158, 255);
        cursor: pointer;
    }
    .main {
        height: 88vh;
        width: 100%;
        margin-top: 60px;
        padding:10px;
        overflow-x: hidden;
    }
</style>

<style>
    .el-tooltip__popper{
        max-width:50%
    }
</style>
